<template>
    <section class="zx-container" :class="{'is-vertical': isVertical }">
        <slot />
    </section>
</template>

<script>
export default {
    name: 'ZxContainer',

    props: {
        direction: String,
    },

    computed: {
        isVertical() {
            if (this.direction === 'vertical') {
                return true;
            } else if (this.direction === 'horizontal') {
                return false;
            }
            return this.$slots && this.$slots.default
                ? this.$slots.default.some(vnode => {
                    const tag = vnode.componentOptions && vnode.componentOptions.tag;
                    return tag === 'zx-header' || tag === 'zx-footer';
                })
                : false;
        },
    },
};
</script>

<style lang="scss" scoped>
.zx-container {
    display: flex;

    box-sizing: border-box;
    height: 100%;
}

.is-vertical {
    flex-direction: column;
}

</style>
